<template>
  <view>
    <view class="heads">
      <view class="heads-gz" @click="gz_pop_show = true">积分规则</view>
      <view class="heads-num">我的积分:
        <text>{{ integerTotal }}</text>
      </view>
      <view class="guoqi" v-if="choose_num == 1">您有{{ all_integral }}积分即将过期</view>
    </view>

    <view class="info">

      <view class="choose">
        <view @click="choose_type(0)" :class=" choose_num == 0 ? 'choose-item choose-item-active' : 'choose-item'">
          积分收支明细
        </view>
        <view @click="choose_type(1)" :class=" choose_num == 1 ? 'choose-item choose-item-active' : 'choose-item'">
          <view v-if="gq_list_length > 0" class="choose-item-red">{{ gq_list_length }}</view>
          <!-- <view class="choose-item-red">{{ gq_list_length }}</view> -->
          即将过期明细
        </view>
      </view>

      <view class="list" v-if="choose_num == 0" v-for="item in list">
        <view class="list-l">
          <view class="list-l-t">{{
              IntegralType[item.integralTypeTwo] ? IntegralType[item.integralTypeTwo] : '--'
            }}
          </view>
          <view class="list-l-b"> {{ item.createTime }}</view>
        </view>
        <view class="list-r"> {{ item.integralTypeTwo < 100 ? '+' : '' }} {{ item.integral }}</view>
      </view>

      <view style="height: 100upx;" v-show="choose_num == 0 && !list[0]"></view>
      <no_order style="margin-top:50upx;" v-show="choose_num == 0 && !list[0]" title="暂无数据"></no_order>

      <view class="list-two" v-if="choose_num == 1" v-for="item in logList">
        <view class="list-two-l">{{ item.expireTime }}日即将过期积分</view>
        <view class="list-two-r">{{ item.integral }}</view>
      </view>
      <view style="height: 100upx;" v-show="choose_num == 1 && !logList[0]"></view>
      <no_order style="margin-top:50upx;" v-show="choose_num == 1 && !logList[0]" title="暂无数据"></no_order>
    </view>
    <!-- <view v-html="gz_content"></view> -->
    <!-- <textarea placeholder-style="color:#F76260" v-model="gz_content" placeholder="占位符字体是红色的"/> -->
    <view class="zhezhao" v-if="gz_pop_show"></view>
    <view class="gz-pop" v-if="gz_pop_show">
      <view class="gz-pop-box">
        <view class="gz-pop-title">规则</view>
        <!-- <view class="gz-pop-content">{{ gz_content }}</view> -->
        <textarea maxlength="20000" class="gz-pop-content" placeholder-style="color:#F76260" v-model="gz_content"
                  placeholder="占位符字体是红色的"/>
        <view class="gz-pop-btn" @click="gz_pop_show = false">确定</view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      choose_num: 0,
      page: 1,
      limit: 15,
      current_list_length: 0,
      all_integral: 0,  // 即将过期积分
      integerTotal: 0, // 我的积分
      list: [], // 收支明细 list
      logList: [], // 即将过期 list
      gz_content: '', // 规则文本
      gz_pop_show: false,
      gq_list_length: 0,
      IntegralType: []
    }
  },
  onLoad(req) {
    this.integerTotal = req.integerTotal;
	this.getTotalIntegral();
    this.getIntegralLogList();
    this.getIntegralGuiZe(); // 获取积分规则
    this.getIntegralExpiredList();
    this.getIntegralType()
  },
  methods: {
    //获取积分类型
    async getIntegralType() {
      var that = this;
      let {data} = await this.$javaApi.doRequest("get", '/integral/manage/getIntegralType', {}, 'json')
      data.data.map(item => {
        that.IntegralType[item.id] = item.name
      })
      this.$forceUpdate()
    },
	getTotalIntegral() {
		this.$javaApiTwo.doRequest("post", "/customerkt/integral/myIntrgral", {}, 'json').then(res => {
		  if (res.data.code == 0) {
		    this.integerTotal = res.data.data.integerTotal;
		  }
		})
	},
    getIntegralGuiZe() {
      var that = this;
      that.$javaApi.doRequest("post", "/customerkt/integral/integralRule", {}, 'json').then(res => {
        if (res.data.code == 0) {
          this.gz_content = res.data.data.content;
        }

      })
    },

    // 用户积分收支明细
    getIntegralLogList() {
      var that = this;
      var data = {
        page: this.page,
        pageSize: this.limit,
      }
      // （100以下收入，100以上支出）
      // 1视频直播，2视频答题，3批量发送，4打卡笔记，99积分返回，100店长核销，101银豹门店核销，102查询核销，103团购抵现,200积分过期
      that.$javaApi.doRequest("post", "/customerkt/integral/myIntegralLog", data).then(res => {
        if (res.data.code == 0) {
          for (var i = 0; i < res.data.data.length; i++) {
            res.data.data[i].integralTypeTwo = res.data.data[i].integralType;
            var types = '';
            if (res.data.data[i].integralType == 1) {
              types = '视频直播';
            }
            if (res.data.data[i].integralType == 2) {
              types = '视频答题';
            }
            if (res.data.data[i].integralType == 3) {
              types = '批量发送';
            }
            if (res.data.data[i].integralType == 4) {
              types = '打卡笔记';
            }
            if (res.data.data[i].integralType == 98) {
              types = '退货退积分';
            }
            if (res.data.data[i].integralType == 99) {
              types = '积分返回';
            }
            if (res.data.data[i].integralType == 100) {
              types = '店长核销';
            }
            if (res.data.data[i].integralType == 101) {
              types = '银豹门店核销';
            }
            if (res.data.data[i].integralType == 102) {
              types = '查询核销';
            }
            if (res.data.data[i].integralType == 103) {
              types = '团购抵现';
            }
            if (res.data.data[i].integralType == 200) {
              types = '积分过期';
            }
            res.data.data[i].integralType = types;
          }
          this.current_list_length = res.data.data.length
          this.list = this.list.concat(res.data.data)
        }

      })
    },

    // 用户即将过期积分列表
    getIntegralExpiredList() {
      var that = this;
      var data = {
        page: this.page,
        pageSize: this.limit,
      }
      that.$javaApi.doRequest("post", "/customerkt/integral/integralExpired", data).then(res => {
        if (res.data.code == 0) {
          this.all_integral = res.data.data.totalIntegral
          this.current_list_length = res.data.data.list.length
          this.gq_list_length = res.data.data.list.length
          this.logList = this.logList.concat(res.data.data.list)
        }

      })
    },
    choose_type(num) {
      this.choose_num = num;
      this.page = 1;
      this.list = [];
      this.logList = [];
      if (num == 1) {
        this.getIntegralExpiredList();
      } else {
        this.getIntegralLogList();
      }
    },
  },
  //上拉加载监听方法
  onReachBottom: function () {
    this.page++;
    if (this.choose_num == 1) {
      this.getIntegralExpiredList();
    } else {
      this.getIntegralLogList();
    }
  },
}
</script>

<style scoped>
page {
  background-color: rgba(250, 250, 250, 1);
}

.heads {
  width: 750upx;
  height: 358upx;
  background: linear-gradient(180deg, #FF7E2C 0%, rgba(255, 126, 44, 0.6700) 100%);
}

.heads-gz {
  width: 690upx;
  height: 70upx;
  line-height: 70upx;
  text-align: right;
  color: #fff;
  font-size: 30upx;
  margin: 0 auto;
}

.heads-num {
  min-width: 300upx;
  height: 70upx;
  line-height: 70upx;
  background: linear-gradient(90deg, #FF7F2D 0%, rgba(255, 136, 60, 0.1200) 100%);
  border-radius: 20upx;
  font-size: 24upx;
  color: #fff;
  padding-left: 20upx;
  margin-left: 30upx;
}

.heads-num text {
  font-size: 42upx;
}

.info {
  width: 690upx;
  min-height: 200upx;
  margin: 0 auto;
  margin-top: -150upx;
  background-color: #fff;
  border-radius: 15upx 15upx 0 0;
}

.choose {
  width: 690upx;
  height: 80upx;
  line-height: 80upx;
  display: flex;
  border: 2upx solid #FF7E2C;
  border-radius: 15upx;
  overflow: hidden;
  background-color: #fff;
}

.choose-item {
  flex: 1;
  text-align: center;
  font-size: 32upx;
  color: rgba(255, 126, 44, 1);
  background-color: #fff;
  border-radius: 10upx;
  position: relative;
}

.choose-item-active {
  color: #fff;
  background-color: rgba(255, 126, 44, 1);
}

.choose-item-red {
  min-width: 35upx;
  height: 35upx;
  line-height: 29upx;
  border-radius: 17upx;
  color: #fff;
  font-size: 18upx;
  text-align: center;
  background-color: #FF4417;
  position: absolute;
  right: 55upx;
  top: 4upx;
  border: 3upx solid #fff;
}

.list {
//width: 690upx; height: 150upx;
  background: #FFFFFF;
  border-radius: 10upx;
  padding: 30upx;
  display: flex;
  border-bottom: 2upx solid #F1F1F1;
}

.list-l {
  flex: 1;
}

.list-l-t {
  color: #333;
  font-size: 32upx;
}

.list-l-b {
  color: #666;
  font-size: 24upx;
  margin-top: 20upx;
}

.list-r {
  width: 100upx;
  line-height: 90upx;
  text-align: right;
}

.list-two {
  width: 690upx;
  height: 100upx;
  line-height: 100upx;
  background: #FFFFFF;
  border-radius: 10upx;
  font-size: 32upx;
  display: flex;
  border-bottom: 2upx solid #F1F1F1;
}

.list-two-l {
  flex: 1;
  padding-left: 30upx;
}

.list-two-r {
  width: 100upx;
  padding-right: 30upx;
}

.guoqi {
  height: 70upx;
  line-height: 70upx;
  color: #fff;
  font-size: 24upx;
  padding-left: 30upx;
}

.zhezhao {
  width: 100vw;
  height: 100vh;
  background-color: #000000;
  opacity: 0.5;
  position: fixed;
  left: 0;
  top: 0;
}

.gz-pop {
  width: 690upx;
  height: 700upx;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 24upx;
  background-color: #FFFFFF;
  background-size: 100% auto;
  z-index: 100;
  box-sizing: border-box;
}

.gz-pop-title {
  height: 100upx;
  line-height: 100upx;
  text-align: center;
  font-weight: 500;
  font-size: 34upx;
  background-color: #fff;
}

.gz-pop-box {
  width: 100%;
  height: 100%;
  position: relative;
}

.gz-pop-content {
  width: 90%;
  margin: 0 auto;
  height: 500upx;
}

.gz-pop-btn {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100upx;
  line-height: 100upx;
  text-align: center;
  color: #007AFF;
  border-top: 2upx solid #ccc;
  background-color: #fff;
}

</style>
